<template>
  <a-drawer
    v-bind="drawer"
    v-model:visible="visibleValue"
  >
    <!-- form -->
    <div class="orderManageDetail__content">

      <div
        class="orderStatus"
        style="color:#0ac88f;font-size:20px;font-weight:600;"
      >
        <div v-if="data[orderStatus.key] == 3">
          <CheckCircleTwoTone twoToneColor="#0ac88f" />
          <span style="padding-left:4px;"> {{orderStatus.title}}：</span>
          <span>订购已取消</span>
        </div>
        <div v-if="data[orderStatus.key] == 2">
          <CheckCircleTwoTone twoToneColor="#0ac88f" />
          <span style="padding-left:4px;">{{orderStatus.title}}：</span>
          <span>订购成功</span>
        </div>
        <div v-if="data[orderStatus.key] == 1">
          <CheckCircleTwoTone twoToneColor="#0ac88f" />
          <span style="padding-left:4px;"> {{orderStatus.title}}：</span>
          <span>待支付</span>
        </div>
        <div v-if="data[orderStatus.key] == 0">
          <CheckCircleTwoTone twoToneColor="#0ac88f" />
          <span style="padding-left:4px;">{{orderStatus.title}}：</span>
          <span>未完成</span>
        </div>
      </div>
      <a-form
        layout="inline"
        :model="formData"
        class="formbox"
      >
        <a-form-item
          class="formItem"
          v-for="child in formData.list"
          :key="child.key"
          :label="child.title"
        >
          <div
            class="orderType"
            v-if="child.key =='orderType'"
          >
            <div v-if="data[child.key] == 0">普通订单</div>
            <div v-if="data[child.key] == 1">邀请码订单</div>
            <div v-if="data[child.key] == 2">限时活动订单</div>
          </div>
          <div
            class="orderType"
            v-if="child.key =='staffId'"
          >
            <div><span>{{data['staffName']}}</span>[{{data['staffPhone']}}]</div>
          </div>
          <div
            class="orderType"
            v-if="child.key =='voucher'"
          >
            <a-image-preview-group class="img">
              <!-- <a-image
                v-for="item in data['voucher']"
                :key="item"
                :width="200"
                :src="item"
              /> -->
              <a-image
                :width="30"
                :src="data['voucher']"
              />
            </a-image-preview-group>
          </div>
          <div v-if="child.key != 'orderType' && child.key != 'staffId' && child.key !='voucher'">{{ data[child.key] }}</div>
        </a-form-item>
      </a-form>

      <a-row class="txts">
        <a-col
          :span="3"
          class="txt"
        >
          <div>{{formData.lists[0].title}}</div>
          <div class="span">
            <span>{{ data['orderDesc'] }}</span>
          </div>
        </a-col>
        <a-col
          :span="3"
          class="txt"
        >
          <div>{{formData.lists[1].title}}</div>
          <div class="span">
            <span>{{ data['serviceYear'] }}</span>
          </div>
        </a-col>
        <a-col
          :span="14"
          class="txt"
        >
          <div>有效期</div>
          <div class="span"><span>{{ data['startTime'] }}--</span>
            <span>{{ data['endTime'] }}</span>
          </div>
        </a-col>
        <a-col
          :span="4"
          class="txt"
        >
          <div>支付金额/元</div>
          <div class="span"><span>{{ data['payAmount'] }}</span></div>
        </a-col>
      </a-row>

    </div>
  </a-drawer>
  <!-- <a-table
    :columns="table.columns"
    :data-source="table.data"
    :pagination="false"
    rowKey="staffId"
  >
  </a-table> -->
</template>
<script>
import { ref, defineComponent, reactive, toRefs } from 'vue';
import { CheckCircleTwoTone } from '@ant-design/icons-vue';

export default defineComponent({
  name: '',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['update:visible'],
  computed: {
    visibleValue: {
      get () {
        return this.visible;
      },
      set (value) {
        this.$emit('update:visible', value);
      },
    },
  },
  setup () {
    const drawer = ref({
      title: '订购详情',
      width: 800,
    });
    const state = reactive({
      orderStatus: { title: '订单状态', key: 'status' },
      // orderShopName: { title: '订购店铺', key: 'shopName' },
      // orderStatus: { title: '订单编号', key: 'orderSn' },
      // orderStatus: { title: '创建时间', key: 'createTime' },
      // orderStatus: { title: '订单类型', key: 'orderType' },
      // orderStatus: { title: '订单状态', key: 'status' },
      staffId: { title: '员工ID', key: 'staffId' },
      staffName: { title: '员工名字', key: 'staffId' },
      staffPhone: { title: '员工电话', key: 'staffPhone' },

      formData: {
        title: '基本信息',
        list: [
          { title: '订购店铺', key: 'shopName' },
          { title: '订单编号', key: 'orderSn' },
          { title: '创建时间', key: 'createTime' },
          { title: '订单类型', key: 'orderType' },
          { title: '开通凭证', key: 'voucher' },
          { title: '绑定员工', key: 'staffId' },

        ],
        lists: [
          { title: '服务名称', key: 'orderDesc' },
          { title: '服务时长', key: 'serviceYear' },
          { title: '开始时间', key: 'startTime' },
          { title: '到期时间', key: 'endTime' },
          { title: '支付金额/元', key: 'payAmount' },

        ]
      },
      // table: {
      //   columns: [
      //     { title: '服务名称', dataIndex: 'orderDesc' },
      //     { title: '服务时长', dataIndex: 'serviceYear' },
      //     { title: '开始时间', dataIndex: 'startTime' },
      //     { title: '到期时间', dataIndex: 'endTime' },
      //     { title: '支付金额/元', dataIndex: 'payAmount' },
      //   ],
      //   data: [],
      // },
    });

    return {
      ...toRefs(state),
      drawer,
    };
  },
  components: {
    CheckCircleTwoTone
  }
});
</script>
<style  scoped>
.ant-form-inline .ant-form-item {
  margin: 0;
}
.formbox {
  width: 100%;
}
.formItem {
  display: inline-block;
  width: 50%;
  margin: 0;
}
.txts .ant-col div {
  height: 40px;
  line-height: 40px;
  background: #f9f9f9;
  padding: 0 8px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}
.txts .ant-col .span {
  padding-left: 8px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  background: none;
}
</style>
